<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>170706test</title>
    <style>
        *{
            padding:0;
            margin:0;
            font-family:"Microsoft Yahei";
            font-size:16px;
        }
        button{
            width:100px;
            height:36px;
            display:block;
            border-radius:4px;
            border:1px solid #303030;
            color:#AFAAAA;
            text-align:center;
            margin:50px auto;
            outline:none;
            cursor:pointer;
        }
        h1{
            color:#ff6666;
            text-align:center;
        }
        #nowTime{
            width:160px;
            height:56px;
            border-radius:6px;
            color:orangered;
            margin:20px auto;
        }
        #date{
            text-align:center;
        }
        #warm{
            width:60%;
            height:66px;
            margin:100px auto;
            text-align:center;
            color:whitesmoke;
            background:#1b6b63;
            box-shadow: 0 0 12px 0 #000;
            line-height:66px;
        }
    </style>
</head>
<body>
    <button onclick="myDate()">显示日期</button>
    <p id="date">这里会显示日期和时间</p>
    <button id="nowTime">点我看时间有惊喜</button>
    <h1></h1>
    <div id="warm">
    </div>
    <script src="js/fede.js"></script>
    <script>
        function myDate(){
            document.getElementById("date").innerHTML=Date();
        }
        /*var ar = "123我是谁";
        console.log(typeof ar);     //判断ar的字符类型
        console.log(isNaN(ar));      //不是number类型的返回true
        var world = 1;
        /!*world = 2;*!/              //如果加上这个的话，world将被赋新值
        World = 2;                  //此World非彼world，因为Js是区分大小写的
        var judge = world == World;            //判断world是不是等于World
        console.log(judge);
        console.log("-------------------------------------------------------");
        var str = "我是谁";
        var empty = "";
        empty = Boolean(empty);
        console.log(empty);                        //空字符串转布尔值
        str = Boolean(str);                        //非空字符串转布尔值
        console.log(str);
        var nul = null;
        nul=Boolean(nul);                           //Null值转化成布尔值
        console.log(nul);                          //返回false
        console.log(nul==empty);                    //返回的时true，因为它们结果都为false
        var num1 = 66;
        var num2 = -100;
        var num3 = 0;
        num1 = Boolean(num1);                     //正数转为布尔值，返回true
        num2 = Boolean(num2);                     //负数转为布尔值，返回true
        num3 = Boolean(num3);                    //零转为布尔值，返回false
        console.log("我是正数，返回的布尔值是"+num1);
        console.log("我是负数，返回的布尔值是"+num2);
        console.log("我是零，返回的布尔值是"+num3);
        console.log("非零数字转为布尔值为true，零转为布尔值为false");
        console.log("_______________________________________________________________");
        var num4 = 666;
        num4 = String(num4);                    //数字转为字符串
        console.log(num4);
        var str1 = "";
        var str2 = "外面的世界很精彩！";
        var str3 = "110报警";
        var str4 = "火警拨119";
        var str5 = "000123456";
        str1 = Number(str1);                    //空字符串转化为数字，返回数字0
        str2 = Number(str2);                    //非空纯字符串组成的字符串转化为数字，返回number类型特殊值之一NaN
        str3 = Number(str3);                    //非空前数字后字符串组成的字符串转化为数字，返回number类型特殊值之一NaN
        str4 = Number(str4);                    //非空前字符串后数字组成的字符串转化为数字，返回number类型特殊值之一NaN
        str5 = Number(str5);                    //由前面若干个数字0加上后面数字组成的字符串转为数字，返回的是去掉前面0的数字
        console.log(str1);
        console.log(typeof str1);               //NaN是属于number类型的，是number的一个特殊值，它和任何字符比较返回的都是false
        console.log(str2);
        console.log(str3);
        console.log(str4);
        console.log(str5);
        console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
        var bolT = true;
        var bolF = false;
        bolT = Number(bolT);                   //布尔值true转为数字，返回1
        bolF = Number(bolF);                   //布尔值false转为数字，返回0
        console.log(bolT);
        console.log(bolF);*/
        //做个利用if---else语句写的根据当前系统时间显示早上好、上午好、中午好、下午好、晚上好等等问候语
        console.log("***********************************************************************");
        var nowTime;
        nowTime = Date();
        nowTime = nowTime.split(" ");             //将时间字符串转为数组，用空格截取是因为返回的时间字符串是由空格隔开的
        var time = nowTime[4];                   //只取时间，下标为4
        time = time.split(":");                  //再将时间转成数组，由时分秒构成
        var h = time[0];
        h = Number(h);
        var m = time[1];
        m = Number(m);
        var btn = document.getElementById("nowTime");
        var showTime = document.getElementsByTagName("h1")[0];
        var Warm = document.getElementById("warm");
        btn.onclick = function(){
            fadeIn(showTime,60,3000);                      //3秒后颜色慢慢变淡
            showTime.innerHTML = "当前时分："+h+"时"+m+"分";
            if(0<=h && h<=4){                               //凌晨
                Warm.innerHTML = "夜深了，正是睡眠好时机！";
            }else if(5<=h && h<=7){                        //早晨
                Warm.innerHTML = "早上好！";
            }else if(8<=h && h<=11){                       //上午
                if(8<=h && h<=9){
                    Warm.innerHTML = "上午好！记得吃早餐哦！";
                }else if(h==10){
                    Warm.innerHTML = "上午好！";
                }else{
                    Warm.innerHTML = "上午好！午餐时间快到咯！";
                }
            }else if(h==12){                              //中午
                Warm.innerHTML = "中午好,午饭时间到！";
            }else if(13<=h && h<=18){                     //下午
                if(13<=h && h<=14){
                    Warm.innerHTML = "下午好！记得午休哦，为下午战斗蓄力！";
                }else{
                    Warm.innerHTML = "下午好！我与你并肩战斗！";
                }
            }else{                                        //晚上
                Warm.innerHTML = "晚上好！早睡早起身体好！";
            }
        }
    </script>
</body>
</html>